<template>
  <el-table border :data="list" style="width: 100%">
    <!-- type="expand" 表示当前表格的行可以展开 -->
    <el-table-column type="expand">
      <template #default="{ row }">
        <!-- 一级 -->
        <el-row v-for="one in row.children" :key="one.id">
          <el-col :span="4">
            <el-tag closable>
              {{ one.authName }}
            </el-tag>
            <i class="el-icon-caret-right"></i>
          </el-col>
          <el-col :span="20">
            <!-- 二级 -->
            <el-row v-for="two in one.children" :key="two.id">
              <el-col :span="5">
                <el-tag type="success" closable>
                  {{ two.authName }}
                </el-tag>
                <i class="el-icon-caret-right"></i>
              </el-col>
              <el-col :span="19">
                <el-tag @close="$message.success('你好')" v-for="three in two.children" :key="three.id" type="warning" closable>
                  {{ three.authName }}
                </el-tag>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </template>
    </el-table-column>
    <el-table-column type="index" width="50">
      <!-- 表格插槽对象不能直接用插值表达式来查看 -->
      <!-- <template #default="obj">{{ obj.$index + 1 }}</template> -->
    </el-table-column>
    <el-table-column label="角色名称" prop="roleName"> </el-table-column>
    <el-table-column label="角色描述" prop="roleDesc"> </el-table-column>
    <el-table-column label="操作">
      <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
      <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
      <el-button size="mini" type="warning" icon="el-icon-setting">分配权限</el-button>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  methods: {
    fn (obj) {
      console.log(obj)
    }
  },
  data () {
    return {
      list: [
        {
          id: 456,
          roleName: '1231231',
          roleDesc: '121212123123',
          children: [
            {
              id: 101,
              authName: '商品管理',
              path: 'goods',
              children: [
                {
                  id: 104,
                  authName: '商品列表',
                  path: 'goods',
                  children: [
                    {
                      id: 105,
                      authName: '添加商品',
                      path: 'goods'
                    },
                    {
                      id: 116,
                      authName: '商品修改',
                      path: 'goods'
                    },
                    {
                      id: 117,
                      authName: '商品删除',
                      path: 'goods'
                    },
                    {
                      id: 150,
                      authName: '更新商品图片',
                      path: 'goods'
                    },
                    {
                      id: 151,
                      authName: '更新商品属性',
                      path: 'goods'
                    },
                    {
                      id: 152,
                      authName: '更新商品状态',
                      path: 'goods'
                    },
                    {
                      id: 153,
                      authName: '获取商品详情',
                      path: 'goods'
                    }
                  ]
                },
                {
                  id: 115,
                  authName: '分类参数',
                  path: 'params',
                  children: [
                    {
                      id: 142,
                      authName: '获取参数列表',
                      path: 'categories'
                    },
                    {
                      id: 143,
                      authName: '创建商品参数',
                      path: 'categories'
                    },
                    {
                      id: 144,
                      authName: '删除商品参数',
                      path: 'categories'
                    }
                  ]
                },
                {
                  id: 121,
                  authName: '商品分类',
                  path: 'categories',
                  children: [
                    {
                      id: 122,
                      authName: '添加分类',
                      path: 'categories'
                    },
                    {
                      id: 123,
                      authName: '删除分类',
                      path: 'categories'
                    },
                    {
                      id: 149,
                      authName: '获取分类详情',
                      path: 'categories'
                    }
                  ]
                }
              ]
            },
            {
              id: 103,
              authName: '权限管理',
              path: 'rights',
              children: [
                {
                  id: 111,
                  authName: '角色列表',
                  path: 'roles',
                  children: [
                    {
                      id: 139,
                      authName: '获取角色详情',
                      path: 'roles'
                    }
                  ]
                }
              ]
            },
            {
              id: 125,
              authName: '用户管理',
              path: 'users',
              children: [
                {
                  id: 110,
                  authName: '用户列表',
                  path: 'users',
                  children: [
                    {
                      id: 131,
                      authName: '添加用户',
                      path: 'users'
                    },
                    {
                      id: 132,
                      authName: '删除用户',
                      path: 'users'
                    },
                    {
                      id: 133,
                      authName: '更新用户',
                      path: 'users'
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          id: 457,
          roleName: '00000',
          roleDesc: '111111',
          children: []
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  .el-tag {
    margin: 7px;
  }
}
</style>
